<%@ include file="includes/include.jsp" %>

<jsp:include page="includes/header.jsp">
  <jsp:param name="pageTitle" value="Pulse" />
</jsp:include>

<style type="text/css">
  a, h2 {
    color: #009900
  }
  .pulse-stat {
    float: left;
    margin-bottom: 25px;
    margin-right: 25px;
  }
  .pulse-stat h4 {
    border: none;
    color: #333;
    padding: 0px;
  }
  .pulse-stat h5 {
    color: #666;
    font-size: 12px;
  }
  .pulse-stat ol {
    margin: 0px;
  }
  .pulse-stat-heading {
    border-bottom: solid gray 1px;
    margin-bottom: 15px;
    padding-bottom: 3px;
  }
  .pulse-stat-value {
    color: #999;
    font-size: 100px;
    font-weight: bold;
    margin-top: -20px;
    text-align: center;
  }
</style>

<div id="title">
  <h2>Pulse</h2>
</div>

<div class="pulse-stat" style="width:300px">
  <div class="pulse-stat-heading">
    <h4>TOP CHAPTERS</h4>
    <h5>(most events in last six months)</h5>
  </div>
  <ol>
    <c:forEach items="${model.stats.chaptersSortedByNumEvents}" var="chapter" begin="0" end="9">
      <li>
        <a href="/chapter.jsp?id=<c:out value="${chapter.id}"/>"><c:out value="${chapter.name}"/></a>
        <span style="color:gray">(<c:out value="${chapter.numEvents}"/>)</span>
      </li>
    </c:forEach>
  </ol>
</div>

<div class="pulse-stat" style="width:295px">
  <div class="pulse-stat-heading">
    <h4>TOP COUNTRIES</h4>
    <h5>(most events in last six months)</h5>
  </div>
  <ol>
    <c:forEach items="${model.stats.countriesSortedByNumEvents}" var="country" begin="0" end="9">
      <li>
        <c:out value="${country.name}"/>
        <span style="color:gray">(<c:out value="${country.numEvents}"/>)</span>
      </li>
    </c:forEach>
  </ol>
</div>

<div class="pulse-stat" style="width:300px; margin-right:0px">
  <div class="pulse-stat-heading">
    <h4>TOP TOPICS</h4>
    <h5>(most discussed during last six months)</h5>
  </div>
  <ol>
    <c:forEach items="${model.stats.topicsSortedByNumEvents}" var="topic" begin="0" end="4">
      <li>
        <c:out value="${topic.name}"/>
        <span style="color:gray">(<c:out value="${topic.numEvents}"/>)</span>
      </li>
    </c:forEach>
  </ol>
</div>

<br style="clear:both"/>

<div class="pulse-stat" style="width:300px">
  <div class="pulse-stat-heading">
    <h4># CHAPTERS</h4>
    <h5>(total active + incubating)</h5>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numChapters}"/>
  </div>
</div>

<div class="pulse-stat" style="width:300px">
  <div class="pulse-stat-heading">
    <h4># COUNTRIES</h4>
    <h5>(total)</h5>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numCountries}"/>
  </div>
</div>

<div class="pulse-stat" style="width:300px; margin-right:0px">
  <div class="pulse-stat-heading">
    <h4># EVENTS</h4>
    <h5>(held in last six months)</h5>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numEvents}"/>
  </div>
</div>

<br style="clear:both"/>

<%@ include file="includes/footer.jsp" %>